<template>
  <div>
    <el-header>
      <el-row>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <img class="logo" :src="prop.topLogo" alt>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple-light">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item  v-for="(item,index) in prop.menu" :index="index" :key="index">{{item.name}}</el-menu-item>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light text-right">
            <el-button icon="el-icon-search" circle></el-button>
            <el-link type="primary">登录</el-link>
            <el-link type="primary">注册</el-link>
            <el-button type="primary">投稿</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
  </div>
</template>
<script>
  export default {
    props: ['prop'],
    data() {
      return {
        activeIndex: 0
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<style>
  .logo{
    width: 100%;
  }
  .el-header{
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
  }
  .el-header .el-row{
    max-width: 1200px;
    margin: 0 auto;
  }
</style>
